<template>
  <!-- 工程概况 -->
  <div class="page100" :class="{ 'shadow':!isOneProject }">
    <div class="leftpage">
      <corner-card>
        <div slot="head">
          <div class="title">项目简介</div>
        </div>
        <div slot="content" class="h100 scrolly">
          <div class="project" v-for="(val,key,index) in projectStr" :key="'project'+index">
            <div class="flex_up">
              <div class="label">{{ key }}：</div>
              <div class=" flex_1 scrolly text">{{ formBaseData[val]}}</div>
            </div>
          </div>
        </div>
      </corner-card>
    </div>

    <div class="rigthpage flex_1 flex_column">
      <div class="totalPic">
        <corner-card>
          <div slot="head">
            <div class="title">项目总图</div>
          </div>
          <div slot="content" class="h100">
            <div class="top-pic">
              <el-carousel v-if="projectImg.length>0" ref="bridge-carousel" class="top-pic bridgeHoleCarousel" indicator-position="none" :class="projectImg.length<2?'noneButton':''" :autoplay="false" :interval="99999999" height="100%">
                <el-carousel-item v-for="(item, index) in projectImg" :key="item.id+index">
                  <!-- <video :ref="'projectVideo' + index" :key="item.src" style="width: 100%;height: 100%;cursor: pointer; object-fit: cover" muted :autoplay="index === 0" controls :src="item.src" v-if="item.type === 'video'"></video> -->
                  <el-image :key="item.src" @click="showImg(item.src)" :src="item.src" style="width: 100%;height: 100%;cursor: pointer" fit="cover">
                    <div slot="error" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </el-carousel-item>
              </el-carousel>
              <img v-else class="imgSize" :src="pic" />
            </div>
          </div>
        </corner-card>
      </div>

      <div class="organization flex_1 scrolly">
        <corner-card>
          <div slot="head">
            <div class="title">组织架构</div>
          </div>
          <div slot="content" class="organ flex_between">
            <div class="row" v-for="(item,index) in organization" :key="'organization'+index">
              <div class="headLine" :style="{background:item.bg}">{{item.title}}</div>
              <div class="tree-content WholeScroll">
                <el-tree class="workbenchTree" :data="item.list" node-key="id" default-expand-all :props="{children: 'userList'}" :expand-on-click-node="false">
                  <div class="custom-tree-node" slot-scope="{ node, data }">
                    <template v-if="data.nameHead">
                      <el-tooltip effect="dark" :content="data.nameHead" placement="top-start">
                        <div class="deptName">{{ data.nameHead }}</div>
                      </el-tooltip>
                      <div v-if="data.money!=undefined" :style="{color:item.bg,fontWeight: 'bold',}">{{(data.money/10000).toFixed(2)}}万元</div>
                    </template>
                    <template v-else>
                      <div>{{ data.name }}</div>
                      <div class="flex_1 text">{{data.job}}</div>
                    </template>
                  </div>
                </el-tree>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
  </div>
</template>
<script>
import CornerCard from './cornerCard.vue';
export default {
  components: {
    CornerCard
  },
  data() {
    return {
      isOneProject: false,//遮罩
      projectStr: {
        '项目名称': 'projectName',
        '工程地点': 'projectLocation',
        '建设单位': 'buildName',
        '建设规模': 'buildScale',
        '项目概况': 'projectSurvey'
      },
      formBaseData: {},//项目详情
      projectImg: [],//项目总图
      pic: require('@/assets/images/homePage/preview.png'),
      organization: [
        {
          title: '建设单位',
          bg: '#F0A71A',
          list: []
        },
        {
          title: '施工单位',
          bg: '#00D6A1',
          list: []
        },
        {
          title: '监理单位',
          bg: '#11B3D9',
          list: []
        },
        {
          title: '设计单位',
          bg: '#1128D9',
          list: []
        }
      ]
    }
  },
  computed: {
    projectId() {
      return this.$store.state.settings.changeHeaderProject
    }
  },
  watch: {
    projectId: {
      immediate: true,
      handler: function(val) {
        this.projectImg.forEach(item => {
          typeof item.destroy === 'function' && item.destroy()
        })
        console.log("projectId=", val)
        if (val) {
          this.isOneProject = true
          this.projectIdNumber = val
          this.getPic()
          this.getProjectDetail()
          this.getOrganizational()
        } else {
          this.isOneProject = false
          this.projectImg = []//项目总图
          this.formBaseData = {}//项目详情
          // 初始化
          for (let i = 0; i < this.organization.length; i++) {
            this.$set(this.organization[i], 'list', [])
          }
        }
      }
    }
  },
  created() {
  },
  methods: {
    getPic() {
      this.projectImg = []
      this.$httpGet('buss/projectOverview/getProjectrendering?projectId=' + this.projectId).then(res => {
        if (res.code == 200) {
          this.projectImg = res.data.map(item => {
            let type, id
            if (item.idPic) {
              id = item.idPic
              type = 'image'
            }
            const r = {
              type,
              id,
              src: '',
              destroy() { }
            }
            this.checkFileForPreview(r)
            return r
          })
        } else {
          this.$messageError(res.msg)
        }
      }).catch(res => {
        this.$messageError(this.$route.name + '请求失败')
      })
    },
    checkFileForPreview(fileObj) {
      this.$publicUpload.checkFileForPreview(fileObj.id).then(({ href, destroy }) => {
        fileObj.src = href
        fileObj.destroy = destroy
      })
    },
    getProjectDetail() {
      this.$httpGet(
        'buss/projectOverview/getProjectIntroduction?projectId=' + this.projectId,
      ).then(res => {
        if (res.code == 200) {
          this.formBaseData = res.data
        } else {
          this.$messageError(res.msg)
        }
      }).catch(res => {
        this.$messageError(this.$route.name + '请求失败')
      })
    },
    getOrganizational() {
      this.$httpGet(
        'buss/projectOverview/getOrganizationalStructure?projectId=' + this.projectId,
      ).then(res => {
        let { code, data: { jsList, jlList, sjList, sgList }, msg } = res
        if (code == 200) {
          // 建设单位
          this.$set(this.organization[0], 'list', jsList)
          //施工单位
          this.$set(this.organization[1], 'list', sgList)
          //监理单位
          this.$set(this.organization[2], 'list', jlList)
          //设计单位
          this.$set(this.organization[3], 'list', sjList)
        } else {
          this.$messageError(msg)
        }
      })
    }
  },
  beforeDestroy() {
    this.projectImg.forEach(item => {
      typeof item.destroy === 'function' && item.destroy()
    })
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/homepage.scss";
.shadow {
  .leftpage,
  .totalPic,
  .organization {
    position: relative;
    &::after {
      border-radius: inherit;
      content: "请先在左上角选择要查看的项目";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.98);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 28px;
      border-radius: 15px;
      z-index: 2;
    }
  }
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1c1e24;
  height: 100%;
  padding-right: 24px;
}
::v-deep .card_body {
  padding: 23px 26px;
}

.leftpage {
  width: 638px;
  height: 100%;
  margin-right: 24px;
}

.rigthpage {
  height: 100%;
  justify-content: space-between;
}

.project {
  border-top: 1px solid #f5f5f5;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  padding: 16px 11px;
  &:last-child {
    border-bottom: 1px solid #f5f5f5;
  }
  &:nth-child(2n + 1) {
    background-color: #f5f5f5;
  }
  .label {
    width: 100px;
    font-size: 16px;
    color: #000000;
    text-align: right;
  }
  .text {
    font-size: 16px;
    color: #565656;
    line-height: 1.4;
  }
}
.totalPic {
  height: 420px;
  margin-bottom: 35px;
  .top-pic {
    width: 100%;
    height: 100%;
    // padding: 0 10px 10px 10px;
  }
  .imgSize {
    width: 100%;
    height: 100%;
  }
}
.organ {
  height: 100%;
  align-items: flex-start;
  .row {
    width: calc((100% - 27px * 3) / 4);
    height: 100%;
    font-size: 16px;
    background-color: #f8f8f8;
    color: black;
    border-radius: 12px;
  }
  .headLine {
    color: white;
    border-radius: 12px;
    padding: 10px 16px;
  }
  .tree-content {
    height: calc(100% - 40px);
    overflow-y: auto;
    width: 100%;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 0 0 12px 12px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
    color: #000000;
    .deptName {
      flex: 1;
      // max-width: 155px;
      width: 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .text {
    color: #666666;
    text-align: right;
    padding-left: 10px;
  }
}
::v-deep .image-slot {
  width: 100%;
  height: 100%;
  background-color: #f2f6ff;
  color: #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
